<template>
 <div class="container" >
    <div :style="{cursor:'pointer','font-size':'18px'}">
        我没k，我没k，恐龙抗狼
    </div>
    <div :style="[style1,style2,style3]">
        我没k，我没k，恐龙抗狼
    </div>
    <div :style="styleArray">
        我没k，我没k，恐龙抗狼
    </div>
    <button @click="styleBtn">点击</button>
    <button @click="clearBtn">清空</button>
 </div>
</template>
<script>
 export default {
 name: '',
 data: function(){
 return {
    style1:{color:"#FF00F0"},
    style2:{"background-color":"#0000F0"},
    style3:{"border-radius":"20px"},
    styleArray:[]
 }
 },
 methods:{
    styleBtn:function(){
        if(this.styleArray.length === 0){
           this.styleArray.push(this.style1);
        }else if(this.styleArray.length === 1){
           this.styleArray.push(this.style2);
        }else if(this.styleArray.length === 2){
           this.styleArray.push(this.style3);
        }
    },
    clearBtn:function(){
        this.styleArray.splice(0,this.styleArray.length);
    }
 }
 }
</script>
<style>
html,
 body, 
 #app{
 height: 100%;
 }
</style>
<style scoped>
 .container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 background-color: aliceblue;
 }
 .tr{
 width: 200px;
 flex-basis: 50px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 background-color: beige;
 align-items: center;
 }
 .second{
 background-color: aqua;
 }
</style>